<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <link type="text/css" rel="stylesheet" href="__CSS__/register.css">
    <link type="text/css" rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <script src="__JS__/jquery-3.2.1.min.js"></script>
    <script src="__JS__/ajaxfileupload.js"></script>
    <script src="__JS__/jquery.validate.js"></script>
    <script src="__JS__/messages_zh.js"></script>
    <script src="__JS__/layer/layer.js"></script>
    <!--<script src="__JS__/jquery.min.js"></script>-->
    <script src="__JS__/bootstrap.min.js"></script>
    <script src="__JS__/register.js"></script>
    <style type="text/css">

        .fileInputContainer{
            height: 60px;;
            background-image: url("__IMAGES__/thumb_255_0_20160429120228650.jpg");
            position:relative;
            width: 60px;
            background-size: 100% 100%;
        }
        .fileInput{
            height:256px;
            font-size: 300px;
            position:absolute;
            right:0;
            top:0;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
        }

    </style>
</head>
<body>
<div class="container" style="background-color: black">
    <div class="row"  style="padding: 1rem;">
        <div class="col-xs-12" >
            <a href="{:url('Index/index')}"  style="font-size: 1rem;color:white;">
                <span style="font-size: 1rem" class="glyphicon glyphicon-tint"></span>在线学习
            </a>

        </div>
    </div>
</div>
    <div class="container-fluid">
        <center><h1>注册</h1></center>
    </div>

    <div class="container-fluid bk">
        <div class="container">
                <div class="row">
                    <form class="col-sx-12  form-horizontal text-center row " role="form" action="{:url('Index/register')}" method="post" enctype="multipart/form-data">
                            <div class="form-group col-xs-12 row">
                                <label  class="col-xs-4 control-label">昵称</label>
                                <div class="col-xs-8 col-md-4">
                                    <input type="text" name="username" id="username" class="form-control" placeholder="请输入您的昵称">
                                </div>
                            </div>
                            <div class="form-group col-xs-12 row">
                                <label class="col-xs-4 control-label">密码</label>
                                <div class="col-xs-6 col-md-4">
                                    <input type="password" name="password" class="form-control col-xs-10" id="password" placeholder="请输入您的邮箱密码">
                                </div>
                                <div onclick="fun_a()" class="glyphicon glyphicon-eye-open  col-xs-1" style="margin-top: 6px;" id="bc"></div>
                            </div>
                            <div class="form-group col-xs-12 row">
                                <label  class="col-xs-4 control-label">手机号</label>
                                <div class="col-xs-8 col-md-4">
                                    <input type="text" onkeyup="test(this)" name="number" id="number" class="form-control" placeholder="请输入您的手机号">
                                </div>
                                <span id="span_a" style="color: red"></span>
                            </div>
                            <div class="form-group col-xs-12 row ">
                                <label  class="col-xs-4 control-label">家庭号</label>
                                <div class="col-xs-8 col-md-4">
                                    <input type="text" name="home_phone" id="home_phone" class="form-control" placeholder="请输入您的家庭号">
                                </div>
                            </div>
                        <div class="form-group col-xs-12 row">
                                <label class="col-xs-4 control-label">邮箱</label>
                                <div class="col-xs-8 col-md-4">
                                    <input type="email" onkeyup="fun(this)" name="email" class="form-control" id="email" placeholder="请输入您的邮箱地址">
                                </div>
                            <span id="span" style="color: red;"></span>
                        </div>
                        <div class="form-group col-xs-12 row">
                                <label class="col-xs-4 control-label">头像上传</label>
                                <div class="col-xs-8 ">
                                    <div class="fileInputContainer"  id="xmTanImg">
                                        <input class="fileInput" id="file"  type="file" name="image"  />
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group col-xs-12 row ">
                                <label class="col-xs-4 control-label">验证码</label>
                                <div class="row col-xs-8 col-md-3">
                                    <div class="col-md-6 col-xs-6">
                                        <input type="text" name="code" class="form-control" id="code" placeholder="验证码">
                                    </div>
                                    <img class=" col-md-6 col-xs-6" src="{:captcha_src()}"  alt="captcha" onclick="this.src='{:captcha_src()}'">
                                </div>
                            </div>
                            <div class="row form-group col-xs-12 row">
                                <div class="col-xs-offset-2 col-ms-4">
                                    <button type="submit" class="btn btn-lg btn-default">确认注册</button>
                                </div>
                            </div>
                        <div class=" row form-group col-xs-12  row dl" >
                                <div class=" col-md-12" >
                                    已有账号，请点击登录<button type="button" class="btn btn-default"><a class="login_a" href="{:url('Index/login')}">点击登录</a></button>
                                </div>
                            </div>
                        </form>
                </div>
        </div>
    </div>


</body>
</html>
<script>
    var a="{:url('Index/remote')}";
    var b="{:url('Index/remote_a')}";
    $("#file").on("change", function () {

        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl) {
            $("#xmTanImg").css("background-image", "url('"+objUrl+"')"); //将图片路径存入src中，显示出图片
        }
        $('#xmTanImg').css('display', 'block');
    });
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    var ww=document.getElementById("password");
    var bc=document.getElementById("bc");
    function fun_a(){
        if(ww.type=="password"){
            ww.type="text";
            bc.style.color="red";
        }else{
            ww.type="password";
            bc.style.color="";
        }
    }
</script>
